<template>
	<view class="Detail">
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="info" mask-background-color="#CFE4FF" :message="message" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view class="top">
			<view class="title">
				发言
			</view>
		</view>
		<view class="context">
			<InformationBar :arr="info" :opIndex="opIndex" :display="displayIndex" v-if="info!=null"></InformationBar>
		</view>
		<scroll-view class="comments" scroll-y="true">
			<view class="head">
				<view class="reply">
					回复 · {{comments.length}}
				</view>
				<view class="category">
					热门评论
				</view>
				<view class="select">
					<text class="cuIcon-sort icon"></text>
					<text>按热度</text>
				</view>
			</view>
			<view class="body">
				<Comment v-for="(item,index) in comments" :key="index" :comment="item" :token="token"
					v-if="comments.length!=0" @secondFocus="secondFocus(arguments)" @otherFocus="otherFocus(arguments)">
				</Comment>
				<view class="noComment" v-else>评论区空空如也，快来评论吧！</view>
			</view>
		</scroll-view>
		<view class="commentBar">
			<view class="commentInput">
				<input type="text" value="" class="input" :placeholder="placeholder" v-model="commentInput"
					@confirm="commitInfo" :focus="isFocus" auto-blur="true" adjust-position="true" />
			</view>
			<view class="commit" @tap="commitInfo">
				发布
			</view>
		</view>
		<view class="blank" style="height: 8vh;">

		</view>

	</view>
</template>

<script>
	import InformationBar from "../../../components/common/InformationBar.vue"
	import Comment from "../../../components/common/Comment.vue"
	export default {
		name: "Detail",
		components: {
			InformationBar,
			Comment
		},
		data() {
			return {
				message: '默认',
				placeholder: '不发没关系,请继续友善哦~',
				displayIndex: false,
				info: null,
				opIndex: 0,
				inviId: 0,
				token: '',
				comments: [],
				commentInput: "",
				isFocus: false,
				isOneOrTwo: 1,
				secondMsg: []
			}
		},
		onLoad(option) {
			this.inviId = option.inviId
			this.getTie()
			this.getToken()


		},
		methods: {
			open(message) {
				this.message=message;
				this.$refs.popup.open();
			},
			getToken() {
				uni.getStorage({
					key: "login",
					success: (e) => {
						this.token = e.data.token
						this.getComment()
						this.userLook()
					}
				})
			},
			async getTie() {
				const res = await this.$myRequest({
					url: '/invitation/selectByInviId',
					data: {
						inviId: this.inviId
					}
				})
				this.info = res.data.data
				console.log(res)
			},
			async getComment() {
				const res = await this.$myRequest({
					url: '/firstComment/getComment/' + this.inviId,
					token: this.token
				})
				console.log(1, res)
				this.comments = res.data.data
			},
			commitInfo() {
				if (this.isOneOrTwo == 1) {
					this.firstComment()
					this.isFocus = false
					this.commentInput = ''
				} else if (this.isOneOrTwo == 2) {
					this.secondComment()
					this.isFocus = false
					this.commentInput = ''
				} else {
					this.otherComment()
					this.isFocus = false
					this.commentInput = ''
				}
				this.placeholder = '不发没关系,请继续友善哦~'
			},
			secondFocus(msg) {
				this.isFocus = true
				this.isOneOrTwo = 2
				this.placeholder = '回复评论：'
				const info = [msg[0], msg[1], msg[2]]
				this.secondMsg = info
				console.log(this.secondMsg)
			},
			otherFocus(msg) {
				this.placeholder = '讨论：'
				this.isFocus = true
				this.isOneOrTwo = 3
				const info = [msg[0], msg[1], msg[2]]
				this.secondMsg = info
				console.log(this.secondMsg)
			},
			async firstComment() {
				const res = await this.$myRequest({
					url: "/firstComment/insertFirstComment",
					method: "POST",
					token: this.token,
					data: {
						agreeNum: 0,
						inviId: this.inviId,
						comContent: this.commentInput
					}
				})
				this.open(res.data.msg);
				this.getComment()
			},
			async secondComment() {
				const res = await this.$myRequest({
					url: "/secondComment/insertSecondComment",
					method: "POST",
					token: this.token,
					data: {
						agreeNum: 0,
						comContent: this.commentInput,
						comSecondId: 0,
						comUserId: this.secondMsg[0],
						firstId: this.secondMsg[1],
						inviId: this.secondMsg[2],
					}
				})
				this.isOneOrTwo = 1
				this.open(res.data.msg);
				this.getComment();
				console.log(res)
			},
			async otherComment() {
				const res = await this.$myRequest({
					url: "/secondComment/insertSecondComment",
					method: "POST",
					token: this.token,
					data: {
						agreeNum: 0,
						comContent: this.commentInput + '&end',
						comSecondId: 0,
						comUserId: this.secondMsg[0],
						firstId: this.secondMsg[1],
						inviId: this.secondMsg[2],
					}
				})
				this.isOneOrTwo = 1
				this.getComment()
				console.log(res)
			},
			async userLook() {
				const res = await this.$myRequest({
					url: "/userLook/addUserLook",
					method: "POST",
					token: this.token,
					data: {
						agreeStatus: 0,
						inviId: this.inviId,
						state: 1
					}
				})
				console.log(res)
			}
		}
	}
</script>
<style>
	.uni-popup-message{
		display: block;
		text-align: center;
	}
	.uni-popup-message__box{
		flex:none;
		width:450rpx;
		padding: 20rpx;
		margin-top: 100rpx;
		margin-left: 150rpx;
		margin-right: 150rpx;
		border-radius: 10px;
		background-color: #CFE4FF;
		color: #000000
	}
	.uni-popup__info{
		background-color: #CFE4FF;
	}
	.uni-popup__info-text {
		color: #000000;
	}
</style>
<style scoped>
	
	.top {
		width: 93%;
		height: 72.72rpx;
		margin: 18.18rpx auto;
		border-radius: 18.18rpx;
		background-color: #CFE4FF;
		padding-top: 18.18rpx;
	}

	.title {
		background-color: #FFFFFF;
		text-align: center;
		width: 30%;
		height: 54.54rpx;
		border-radius: 18.18rpx;
		line-height: 54.54rpx;
		margin: 0 35%;
	}

	.comments {
		width: 93%;
		height: 59vh;
		margin: 0 auto 36.36rpx;
		background-color: #CFE4FF;
		border-radius: 27.27rpx;
	}

	.noComment {
		width: 100%;
		height: 363.63rpx;
		text-align: center;
		color: #999999;
		line-height: 363.63rpx;
	}

	.head {
		width: 93%;
		display: flex;
		margin: 18.18rpx auto;
		font-size: 21.81rpx;
		line-height: 32.72rpx;
	}

	.reply,
	.category {
		flex: 1;
	}

	.select {
		flex: 3;
		text-align: right;
	}

	.icon {
		position: absolute;
		font-size: 32.72rpx;
		right: 100rpx;
		top: 20rpx;
	}

	.commentBar {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 8vh;
		background-color: #FFFFFF;
		color: #999999;
		padding-top: 18.18rpx;
	}

	.commentInput {
		flex: 7;
	}

	.input {
		width: 85%;
		height: 5vh;
		margin: auto;
		background-color: #f1f1f1;
		border-radius: 40rpx;
		padding-left: 36.36rpx;
		margin-bottom: 16.36rpx;
	}

	.commit {
		flex: 1;
		text-align: left;
		line-height: 5vh;
	}
</style>
